﻿<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>小程序网站</title>
</head>
<link rel="stylesheet" href="/css/home.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="/Scripts/jquery.js"></script>
<script src="/plugins/layer/layer.js"></script>
<script src="/Scripts/com.js"></script>
<script src="/Scripts/config.js"></script>
<script src="/Scripts/contact.js"></script>
<style>
.banner{width:1000px;margin:auto;margin-bottom:15px;overflow:hidden;height:auto}
.banner-img{width:1000px}
.product-content{width:1000px;margin:auto;margin-top:10px}
.product-content-lft{width:70%;float:left;margin-left:124px;}
.product-content-right{width:260px;height:260px;float:right;margin-right: -103px;}
.Productappcode{width:260px;height:260px;float:right}
.product-content-rgt{width:30%;float:right}
.picshow{width:40%;float:left}
.picshow-big{margin-bottom:3px;height:280px}
.picshow-small-img{float:left;margin-right:3px;width:65px}
.jubao{float:right;margin-top:10px;font-size:14px;color:#828282}
.product-content-rgt{width:60%;float:right}
.product-content-rgt-son{width:96%;margin:auto}
.product-title{font-size:20px;margin-bottom:15px;font-family:SimHei,"微软雅黑";}
.product-price{height:70px;padding-top:10px;color:#828282;background-color:#f5f5f5}
.original-price{padding-top:2px;margin-left:10px;margin-bottom:10px;font-size:14px}
.product-price-num{text-decoration:line-through;color:#000;font-size:16px}
.discount-price{margin-left:10px;margin-bottom:10px;font-size:14px}
.discount-price-num{font-size:20px;color:#fe0a3d}
.freight{margin-left:10px;font-size:14px;padding-bottom:10px;position:relative}
.freight-type-icon{height:15px;width:15px;position:absolute;top:3px;left:167px}
.product-number{font-size:14px;color:#828282;margin-top:10px;overflow:hidden}
.product-number-item{width:33%;border-right:1px solid #e1e1e1;float:left;text-align:center}
.product-number-item-numcolor{color:#fe0a3d}
.size{margin-top:10px;margin-left:10px;font-size:14px;color:#828282;overflow:hidden;line-height:30px}
#skuname0{float:left}
#skuname1{margin-top:5px;float:left}
.size-item1{height:30px;float:left;line-height:30px;margin-left:10px;text-align:center;padding-left:3px;padding-right:3px;border:1px solid #e1e1e1;font-size:13px;color:#000;margin-top:10px}
.size-item{height:30px;padding-left:3px;padding-right:3px;float:left;line-height:30px;margin-left:10px;text-align:center;border:1px solid #e1e1e1;font-size:13px;color:#000}
.quantity{font-size:14px;color:#828282;margin-top:10px;margin-left:10px;overflow:hidden}
.quantity-change{float:left;overflow:hidden}
.quantity-change-shownum{float:left;height:25px;width:35px;border:1px solid #e1e1e1;line-height:25px;padding-left:10px;color:#000}
.quantity-change-add-reduce{margin-left:3px;float:left}
.quantity-change-add-reduce-item{height:11px;width:14px;border:1px solid #e1e1e1}
.kucun{float:left;margin-left:20px;font-size:14px;color:#828282;line-height:25px}
.action{float:left;overflow:hidden;margin-top:20px;margin-bottom:10px}
.buy{float:left;height:40px;width:180px;font-size:16px;color:#ed7908;background-color:#fae4cd;border:1px solid #ed7908;text-align:center;line-height:40px;margin-right:10px}
.car{float:left;height:40px;width:180px;font-size:16px;color:#fff;background-color:#ed7908;border:1px solid #ed7908;text-align:center}
.service{float:left;overflow:hidden}
.service-item{float:left;font-size:14px;color:#828282;margin-right:16px}
.show-ipc{width:1000px;margin:auto;margin-top:40px;text-align:center;font-family: SimHei,"微软雅黑";font-size:20px;    margin-left: 187px;}
.show-ipc a {font-family: SimHei,"微软雅黑";font-size:20px;}
.show-ipc img {max-width: 720px;}
.contact-back{float:left}
.hide{display:none}
</style>
<body style="padding:0px;margin:0px;">
    <div class="header">
        <div class="header-mid">
            <div class="header-mid-lft">
                <img src="/images/1loog.png" alt="" class="sitelogo title hide">
            </div>
            <div class="header-mid-rgt">
                <div class="phone-number" style="width:200px;margin-top:27px;color:gray;margin-right: 14px;font-family: SimHei,微软雅黑">服务热线：<span class="store-phone">400-600-9138</span></div>
                <div class="header-input">
                    <input class="header-input_ip" type="text" name="" value="" placeholder="全站搜索">
                    <img src="/images/2.png" alt="" class="input-img">
                </div>
            </div>
        </div>
    </div>

    <!--导航-->
    <div class="navbar">
        <div class="navbar-rel pc_index_nav">
            <div class="navbar-rel-item hot" style="margin-left:20px;" onClick="location.href='index.html'">
                <span>首页</span>
            </div>
        </div>
    </div>


    <div class="product-content">
        <div class="product-content-lft">
            <div class="picshow">
                <!--大图-->
                <div class="pic-big"></div>

                <!--小图列表-->
                <div class="picshow-small imageList">
                </div>
                <div class="jubao hide">
                    举报
                </div>
            </div>
            <div class="product-content-rgt">
                <div class="product-content-rgt-son">
                    <!--商品标题-->
                    <div class="product-title"></div>
                    <div class="product-price">
                        <div class="original-price">
                            市场价&nbsp&nbsp&nbsp&nbsp<span style="color:black;">¥</span>&nbsp&nbsp
                            <span class="product-price-num">0.00</span>
                        </div>
                        <div class="discount-price">
                            促销价&nbsp&nbsp&nbsp&nbsp<span style="color:#fe0a3d;font-size:20px;">¥</span>&nbsp&nbsp
                            <span class="discount-price-num">0.00</span>
                        </div>
                        <div class="freight" style="display:none;">
                            运费&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span>广东深圳 至 赣州</span><img src="/images/productcenter/reduce2.png" class="freight-type-icon" alt="">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span>快递：10:00</span>
                        </div>
                    </div>
                    <div class="product-number">
                        <div class="product-number-item">
                            月销售&nbsp<span class="product-number-item-numcolor saleCount">0</span>
                        </div>
                        <div class="product-number-item">
                            累积评价&nbsp<span class="product-number-item-numcolor reviewCount">0</span>
                        </div>
                        <div class="product-number-item" style="border-right:none; display:none;">
                            积分&nbsp<span class="product-number-item-numcolor">299</span>
                        </div>
                    </div>

                    <!--属性-->
                    <div class="size">
                    </div>
                    <div class="quantity">
                        <div style="float:left;line-height:30px;margin-right:50px;">
                            数量
                        </div>
                        <div class="quantity-change">
                            <div class="quantity-change-shownum">
                                <input id="quantity-input" style="outline: none;border: none;padding: 0px;height:100%;width:100%;" type="text" name="" value="1">
                            </div>
                            <div class="quantity-change-add-reduce">
                                <div class="quantity-change-add-reduce-item" style="margin-bottom:1px;" onclick="add()">
                                    <img src="/images/productcenter/add1.png" alt="" style="height:11px;width:14px;">
                                </div>
                                <div class="quantity-change-add-reduce-item" onclick="reduce()">
                                    <img src="/images/productcenter/reduce2.png" alt="" style="height:11px;width:14px;">
                                </div>
                            </div>
                        </div>
                        <div class="kucun">
                            库存<span class="stockNumber">0</span>件
                        </div>
                    </div>
                    <div class="action">
                        <div class="buy">
                            扫码购买
                        </div>
                        <div class="car" id="car">
                            <img src="/images/productcenter/car1.png" alt="" style="height:24px;width:24px;margin-right3px;vertical-align:middle;">
                            <span style="height:100%;vertical-align:middle;line-height:42px;">加入购物车</span>
                        </div>
                    </div>
                    <div class="service">
                        <div class="service-item">
                            服务承诺
                        </div>
                        <div class="service-item">
                            正品保证
                        </div>
                        <div class="service-item">
                            极速退款
                        </div>
                        <div class="service-item" style="display:none;">
                            七天无理由退换
                        </div>
                        <div class="service-item" style="margin-right:0px;">
                            <span style="line-height:20px;vertical-align:middle;">支付方式</span><img src="/images/productcenter/reduce2.png" style="vertical-align:middle;" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--产品太阳码-->
        <div class="product-content-right">

        </div>

        
    </div>
    <div style="clear:both"></div>
    <!--产品详情-->
    <div class="show-ipc description" style="margin-left: 181px;">

    </div>

    <div id="contact" class="contact-back">
        <script language="javascript">
            contact();
        </script>
    </div>
    <script>
        $(document).ready(function () {
            getStoreInfo();
            GetNavList(1);
            GetProductDetail();
            ProductAppCodes();	//显示太阳码

            $('.navbar-rel-item').click(function (event) {
                $('.navbar-rel div').removeClass("hot")
                $(this).addClass("hot")
            });

            $(".buy,.car").click(function () {
                Alert("请用微信扫一扫打开");
            })
        });



        //显示产品太阳码
        function ProductAppCodes() {
            var pid = getQueryString("pid");
            var url = siteUrl.fotmatUrl(siteUrl.ProductAppCode.replace("{pid}", pid));
            AjaxGet(url, "", function (data) {
                if (!checkCode(data)) {
                    Alert(data.Message);    //显示错误消息
                    return;
                }
                if (!emptyData(data)) {
                    return; //显示空数据提示
                }
                var CodesData = data.Data.AppCode;
                var html = "";
                html = "<img class='Productappcode' src='" + CodesData + "'>";
                $('.product-content-right').html(html);
            });

        }


        //导航条
        function GetProductDetail() {
            var pid = getQueryString("pid");
            var url = siteUrl.fotmatUrl(siteUrl.ProductDetail.replace("{pid}", pid));
            AjaxGet(url, "", function (data) {
                if (!checkCode(data)) {
                    Alert(data.Message);    //显示错误消息
                    return;
                }
                if (!emptyData(data))
                    return; //显示空数据提示

                var product = data.Data.ProductInfo;
                var MarketPrice = returnFloat(product.MarketPrice);
                var ShopPrice = returnFloat(product.ShopPrice);
                var showimg = siteConfig.imgPath.product.replace("{storeid}", product.StoreId) + product.ShowImg;
                $(".product-price-num").html(MarketPrice);
                $(".product-title").html(product.Name)
                $(".discount-price-num").html(ShopPrice)
                $(".saleCount").html(product.SaleCount);
                $(".reviewCount").html(product.ReviewCount);
                $(".stockNumber").html(product.StockNumber);
                setShowImg(showimg);
                $(".description").html(product.Description);
                //$('.description').remove();
                $('.edui-faked-video').css('margin-left', '152px')
                $('.ke-post ').css('width','700').css('margin-left','153px')
                $('.stockNumber').html(data.Data.StockNumber);	//库存
                $('.saleCount').html(data.Data.SaleCount);	//销量
                $('.reviewCount').html(data.Data.ReviewCount);	//评价

                //sku属性
                var skuList = getSKUList(data.Data.CurrProductSkuList);
                var skuHtml = "";
                for (var i = 0; i < skuList.length; i++) {
                    var item = skuList[i];
                    var valueList = item.skuValueList;
                    skuHtml += "<div style='clear:both;'>";
                    skuHtml += "<div style='float:left;width:68px;'><div id='skuname0'>" + item.AttrName + "</div></div>";
                    for (var j = 0; j < valueList.length; j++) {
                        skuHtml += "<div class='size-item1'>" + valueList[j] + "</div>";
                    }
                    skuHtml += "</div>";
                }
                $(".size").html(skuHtml);

                //小图列表
                var html = "";
                var imageList = data.Data.ProductImageList;
                for (var i = 0; i < imageList.length; i++) {
                    var item = imageList[i];
                    var src = "/images/productcenter/3.png";
                    if (item.ShowImg != '')
                        src = siteConfig.imgPath.product.replace("{storeid}", product.StoreId) + item.ShowImg;
                    html += "<img class='picshow-small-img' src='" + src + "'>";
                }
                $(".imageList").html(html);

                $(".picshow-small-img").click(function () {
                    setShowImg($(this).attr("src"));
                })
            });
        }

        function setShowImg(showimg) {
            $(".pic-big").html("<div class='picshow-big' style='background: url(" + showimg + ") no-repeat;background-size: cover;background-position:center 0px;background-position-y: center;'></div>");
        }

        function getSKUList(skuList) {
            var sku = new Array();
            //添加属性名
            for (var i = 0; i < skuList.length; i++) {
                var item = skuList[i];
                //属性名是否添加过
                if (sku.length > 0 && sku.AttrId == item.AttrId)
                    continue;
                var skuItem = { "AttrId": item.AttrId, "AttrName": item.AttrName, "skuIdList": [], "skuValueList": [] };
                sku.push(skuItem);
            }

            //添加属性值
            for (var i = 0; i < skuList.length; i++) {
                var item = skuList[i];
                for (var j = 0; j < sku.length; j++) {
                    var skuItem = sku[j];
                    //当前属性名
                    if (skuItem.AttrId == item.AttrId) {
                        var isExists = false;
                        //属性值已经添加过
                        for (var k = 0; k < skuItem.skuIdList.length; k++) {
                            if (skuItem.skuIdList[k] == item.AttrValueId) {
                                isExists = true;
                                break;
                            }
                        }
                        //添加属性值
                        if (!isExists) {
                            skuItem.skuIdList.push(item.AttrValueId);	//属性值ID
                            skuItem.skuValueList.push(item.AttrValue);	//属性值内容
                        }
                    }
                }
            }
            return sku;
        }
    </script>
</body>
</html>
